let divWrap = document.querySelector('#divWrap');
let style = document.querySelector('#style');
let desc =  `/**你好，我是一名一年经验的前端开发工程师；
注意啦，接下来，我将开始画一个太极图**/
#circle {
  border: 1px solid;
  top: 0px;
  left: 50%;
  transform: translateX(50%);
  border-radius: 50%;
  background: linear-gradient(to right, rgb(255,255,255) 1%, rgb(255,255,255) 50%, rgb(0,0,0) 50%, rgb(0,0,0) 100%);
  border-color: #e8e8e8;
}
/* 八卦是阴阳形成的
 * 一黑一白
 **/
#circle::before {
  display: block;
  content: '';
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform: translateX(50%);
  background: radial-gradient(ellipse at center, rgb(255,255,255) 1%, rgb(255,255,255) 20%, rgb(0,0,0) 20%, rgb(0,0,0) 100%); 
}
#circle::after {
  display: block;
  content: '';
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform: translateX(50%);
  background: radial-gradient(ellipse at center, rgb(0,0,0) 1%,rgb(0,0,0) 20%, rgb(255,255,255) 20%,rgb(255,255,255) 100%); 
}
#circle{
  border:none;
  box-shadow: 0px 0px 3px #aaaaaa;
}
`
let n = 0;
let addStr = '';
let styleStr = '';
/**sda
 * 
 */
let step = () => {
  setTimeout(() => {
    addStr += desc[n] === '\n' ? '<br>' : desc[n] === ' ' ? '&nbsp;' : desc[n];
    styleStr += desc[n];
    divWrap.innerHTML = addStr;
    style.innerHTML = styleStr;
    window.scrollTo(0, 99999)
    divWrap.scrollTo(0, 99999);
    if (n + 1< desc.length) {
      n = n + 1;
      step()
    }
  },10)
}
step();